<div class="modal fade" id="policy_modal" role="dialog">
    <div class="modal-dialog" style="width:50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title" id="myModalLabel">New Policy</h2>
            </div>
            <div class="modal-body">
                {% include "teacher/policy/form.html" with form=form %}
                
                <!-- Error Message Box -->
                <div id="error_box" name="error_box" class="alert alert-danger alert-dismissable" hidden="true">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    ERROR: This is to be filled in by the "print_error" function. If you see this message that means there's an error with your javascript somewhere.
                </div><!-- /.Error Message Box -->
            </div>
            <div class="modal-footer">
                <button onclick="ajax_save_policy();"
                             id="submit_policy_btn"
                           name="submit_policy_btn"
                           type="button"
                          class="btn btn-primary">
                    <i class="fa fa-check-circle"></i> Submit
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     * Dynamic UI Code.
     *  To give our application a dynamic feel, the following jQuery code will be
     *  used to perform various UI changes.
     */
     $(document).ready(function(){
        $('#policy_modal').on('hidden.bs.modal', function (e) {
            $('#policy_modal').html('');
            $('#add_policy_btn').prop("disabled", false);
            refresh_page();
        });
    });
    
    /**
     *  Function will call AJAX function to load the register.
     */
function ajax_save_policy()
{
    $('#submit_policy_btn').prop("disabled", true);
    
    // create a FormData Object using your form dom element
    var data = new FormData();
    data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
    data.append('file', document.getElementById('id_file').files[0]);
    
    jQuery.ajax({
        url: 'save_policy',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(json_result){
            // success code execution here
            if (json_result.status == "success")
            {
                $('#policy_modal').modal('hide');
            }
            else
            {
                print_error(json_result.message);
            }
        },
        error: function(xhr,status,error) {
            // error code here
        },
        complete: function(xhr,status) {
            // completion code here
            $('#submit_policy_btn').prop("disabled", false);
        }
    });
}

/**
 * Prints a error box with the contents of the errors received from the server.
 */
function print_error(json_result)
{
    $('#error_box').prop("hidden", false); // Display error box.
    
    // Iterate through the JSON array of arrays and generate an error string.
    var message = "<b>Error(s):</b><hr/>";
    var data = $.parseJSON(json_result)
    for (var key in data) {
        if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
            message += "<p>" + key + ": " + data[key] + "<p>";
        }
    }
    
    // Replace the error string with the contents of the error box.
    $('#error_box').html(message);
}

</script>
